<template>
  <v-transition>
    <div>
      <v-header :title="$t('message.Order_orderInfo')"
                @back="goBack"></v-header>
      <div class="order">
        <div class="content">
          <div class="list">
            <div class="foodList">
              <div class="title">
                <span>{{$t('message.Order_ordertype')}}</span>
                <div @click="changeType"
                     class="box"
                     :class="isTakeaway?'takeaway':'pick-up'">

                  <span>{{isTakeaway? $t('message.Order_takeout'):$t('message.Order_invite')}}</span>
                </div>
              </div>
              <div class="title">
                <span>{{$t('message.Order_themenu')}}</span>
                <span class="buy"
                      @click="goBack">{{$t('message.Order_continuetoaddfood')}}</span>
              </div>
              <div class="foods">
                <div class="food"
                     v-for="(food, index) in cartFoods"
                     :key='index'>
                  <div class="name-price">
                    <div class="name">{{food.name}}</div>
                    <div class="price">{{shopInfo.currencydefault}} {{food.cost}}</div>
                  </div>
                  <div class="option"
                       v-for="(option,optionind)   in food.specials"
                       :key="optionind">{{option}}</div>
                  <div class="option"
                       v-if="food.note">{{food.note}}</div>
                  <div class="control">
                    <div class="edit">
                      <img v-if="editedIndex === index"
                           src="../../../static/imgs/edited.png">
                      <img v-else
                           src="../../../static/imgs/edit.png"
                           @click="onRemark(food, index)">
                    </div>
                    <div>
                      <control :food="food"></control>
                    </div>
                  </div>
                  <div v-if="editedIndex === index">
                    <div class="remark-wrapper">
                      <div class="remark-title">{{$t('message.Order_anmerkungen')}}</div>
                      <textarea v-model="remark"
                                class="remark"
                                placeholder="Z.B. “Für Thomas”Ohne Zwiebein"></textarea>
                    </div>
                    <div class="op">
                      <div @click="cancelRemark(food, remark)">{{$t('message.Order_deldte')}}</div>
                      <div @click="saveRemark(food, remark)">{{$t('message.Order_ERLEDIGT')}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="other-wrapper"
                   v-if="discount">
                <div>{{$t('message.Order_preferential')}}</div>
                <div>-{{discount*100}}%</div>
              </div>
              <div class="other-wrapper other_postage">
                <div>{{$t('message.Order_shipping')}}</div>
                <!-- <div>{{shopInfo.currencydefault}} {{shippingFee}}</div> -->
              </div>
              <div class="other-wrapper">
                <div>{{$t('message.Order_theamountof')}}</div>
                <div class="price">
                  <del v-if="discount && totalPrice > +shopInfo.personcost">{{shopInfo.currencydefault}} {{totalPrice}}
                  </del>
                  {{shopInfo.currencydefault}} {{payTotalPrice}}
                </div>
              </div>
              <div class="desc"
                   v-if="shopInfo.personcost != 0">
                {{$t('message.Order_mindestbestellwert')}}{{shopInfo.currencydefault}} {{shopInfo.personcost}}.00{{("message.Order_erreicht")}}.
              </div>
              <div class="btn-wrapper">
                <button class="btn"
                        :disabled="totalCount === 0"
                        @click="goDetail">{{$t('message.Order_submitorders')}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-transition>
</template>

<script>
import transition from '../Common/m-transition'
import header from '../../components/Common/Header'
import control from '../../components/ShopCart/ListControl'
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Order',

  data () {
    return {
      editedIndex: '',
      remark: ''
    }
  },

  props: {
    shopInfo: {
      type: Object
    },
    discount: {
      type: Number
    }
  },

  components: {
    'vHeader': header,
    'vTransition': transition,
    control
  },

  mounted () {
    let lan = localStorage.getItem("lan");
    if(lan){
      this.$i18n.locale = lan
    }
    this.$nextTick(() => {
    })
  },

  watch: {},

  computed: {
    ...mapState([
      'cartFoods', 'isTakeaway'
    ]),
    ...mapGetters([
      'totalPrice', 'totalCount'
    ]),
    //  折扣后总价格
    totalPriceByDiscount () {
      if (this.discount === 0) {
        return this.totalPrice
      } else {
        return (this.totalPrice - (this.discount * this.totalPrice).toFixed(2)).toFixed(2)
      }
    },
    //  配送费
    shippingFee () {
      if (!this.isTakeaway) {
        return '0.00'
      } else if (this.totalPrice >= +this.shopInfo.personcost) {
        return '0.00'
      } else {
        return (this.shopInfo.personcost - this.totalPriceByDiscount).toFixed(2)
      }
    },
    //  支付价格
    payTotalPrice () {
      if (!this.isTakeaway || this.totalPrice >= +this.shopInfo.personcost) {
        return this.totalPriceByDiscount
      } else {
        return parseFloat(this.shopInfo.personcost).toFixed(2)
      }
    },
  },

  filters: {},

  methods: {
    changeType () {
      this.CHANGE_TYPE()
    },
    goDetail () {
      this.$router.push('/detail')
    },
    onRemark (food, index) {
      if (this.remark) {
        this.remark = ''
      }
      if (food.note) {
        this.remark = food.note
      }
      this.editedIndex = index
    },
    cancelRemark (food) {
      if (food.note) {
        food.note = ''
      }
      this.remark = ''
      this.editedIndex = ''
    },
    saveRemark (food) {
      food.note = this.remark
      this.remark = ''
      this.editedIndex = ''
    },
    goBack () {
      this.$router.go(-1)
    },
    ...mapMutations([
      'ADD_CART', 'DEC_CART', 'CHANGE_TYPE'
    ])
  }
}
</script>

<style scoped lang="scss">
@import "../../../static/css/mixin";
.order {
  margin-top: 1.28rem;
  padding-bottom: 1.5rem;
  z-index: 40;
  position: fixed;
  left: 0;
  top: 0;
  @include wh(100%);
  background-color: #fff;
  overflow-y: scroll;
  .content {
    margin: 0 0.48rem;
    .list {
      .foodList {
        .title {
          padding: 0 0.32rem;
          height: 0.98rem;
          @include fscfw(0.36rem);
          @include fja();
          border-bottom: 1px solid $bc;
          .buy {
            color: $tc;
          }
          .box {
            @include whl(2.48rem, 0.72rem);
            background-color: red;
            color: $fc;
            &.takeaway {
              background: url("../../../static/imgs/lieferung.png") no-repeat;
              background-size: 100% 100%;
              text-align: right;
              width: 49%;
              span {
                padding-right: 0.2rem;
              }
            }
            &.pick-up {
              background: url("../../../static/imgs/abholung.png") no-repeat;
              background-size: 100% 100%;
              text-align: left;
              width: 49%;

              span {
                padding-left: 0.2rem;
              }
            }
          }
        }
        .foods {
          .food {
            @include fj();
            flex-direction: column;
            padding: 0 0.32rem 0.24rem;
            border-bottom: 1px solid $bc;
            .name-price {
              padding: 0.22rem 0;
              @include fja();
              @include fscfw(0.32rem);
            }
            .option {
              padding-bottom: 0.16rem;
              @include fsc(0.28rem, #969696);
            }
            .control {
              @include fja();
              .edit {
                @include wh(0.64rem);
                img {
                  width: 100%;
                }
              }
            }
            .remark-wrapper {
              position: relative;
              top: 0;
              left: 0;
              .remark-title {
                position: absolute;
                top: 0.03rem;
                left: 0.2rem;
                padding: 0 0.1rem;
                background-color: $fc;
                font-size: 0.32rem;
              }
              .remark {
                margin-top: 0.18rem;
                padding: 0.2rem;
                @include wh(100%, 2rem);
                border: 1px solid #dedede;
                border-radius: 0.1rem;
              }
            }
            .op {
              margin-top: 0.28rem;
              margin-left: 2.4rem;
              @include fj();
              font-weight: 600;
              div {
                color: $tc;
              }
            }
          }
        }
      }
      .other-wrapper {
        height: 0.9rem;
        line-height: 0.9rem;
        padding: 0 0.32rem;
        @include fj();
        @include fscfw(0.32rem);
        border-bottom: 1px solid $bc;
        .price {
          color: #ed4126;
          del {
            font-size: 0.26rem;
            margin-right: 0.12rem;
          }
        }
      }
      .other_postage {
        display: flex;
        flex-wrap: wrap;
        height:auto;
        line-height: .5rem;
        justify-content: center;
      }
      .desc {
        height: 0.9rem;
        @include fa();
        padding: 0 0.32rem;
        line-height: 0.34rem;
        @include fscfw(0.24rem, #1f3339);
      }
      .btn-wrapper {
        margin: 0.2rem 0;
        @include fj();
        .btn {
          @include fscfw(0.34rem, $fc);
          @include whl(100%, 1rem);
          background-color: $tc;
          text-align: center;
          border-radius: 0.08rem;
        }
      }
    }
  }
}
</style>
